<%@ taglib prefix="c" uri="http://java.sun.com/jsp/jstl/core" %>
<%@page contentType="text/html;charset=utf-8" %>
<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8">
    <meta name="referrer" content="no-referrer">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <c:forEach items="${news}" var="item">
        <title>${item.title} - 新华每日新闻</title>
    </c:forEach>
    <link rel="stylesheet" href="<c:url value="/resources/css/index.css"/>"/>
    <script src="<c:url value="/resources/js/jquery-3.7.1.min.js"/>"></script>
    <style>
        /* 仅添加返回按钮和详情页必要样式 */
        .back-link {
            display: inline-block;
            margin: 15px 0;
            color: #333;
            text-decoration: none;
            font-size: 14px;
        }

        .back-link:hover {
            text-decoration: underline;
        }

        .detail-content {
            line-height: 1.8;
            padding: 10px 0;
        }

        .detail-content p {
            margin-bottom: 15px;
        }

        .policy-point {
            margin: 10px 0 10px 20px;
        }

        button {
            padding: 8px 15px;
            background-color: #c00;
            color: white;
            border: none;
            cursor: pointer;
        }

        #comment{
            width: 100%;
            height: 100px;
            padding: 10px;
        }
    </style>
</head>
<body>
<!-- 头部区域保持不变 -->
<header class="news-header">
    <div class="header-top">
        <div class="date-time" id="date">2025年10月12日 星期三 16:17</div>
        <div class="weather" id="weather">北京 晴 18°C</div>
    </div>

    <div class="logo-area">
        <div class="header-right">
            <div class="search-bar">
                <input type="text" placeholder="搜索新闻...">
                <button>搜索</button>
            </div>
            <c:if test="${empty sessionScope.user}">
                <button class="login-btn"><a href="<c:url value="/page/login"/>">登录</a></button>
            </c:if>
            <c:if test="${!empty sessionScope.user}">
                <span class="welcome">欢迎，${sessionScope.user}</span>
                <button class="login-btn"><a href="#" onclick="logout()">退出</a></button>
            </c:if>
        </div>
    </div>

    <nav class="main-nav">
        <ul>
            <li><a href="<c:url value="/page/homepage"/>">首页</a></li>
            <li><a href="<c:url value="/page/news?category=国内"/>">国内</a></li>
            <li><a href="<c:url value="/page/news?category=国际"/>">国际</a></li>
            <li><a href="<c:url value="/page/news?category=财经"/>">财经</a></li>
            <li><a href="<c:url value="/page/news?category=科技"/>">科技</a></li>
            <li><a href="<c:url value="/page/news?category=体育"/>">体育</a></li>
            <li><a href="<c:url value="/page/news?category=娱乐"/>">娱乐</a></li>
            <li><a href="<c:url value="/page/news?category=生活"/>">生活</a></li>
            <li><a href="<c:url value="/page/news?category=观点"/>">观点</a></li>
        </ul>
    </nav>
</header>

<!-- 主要内容区 -->
<div class="container">
    <div class="main-content">
        <section class="news-section">
            <c:forEach items="${news}" var="item">
            <h1 class="section-title">${item.category}新闻</h1>

            <!-- 返回链接 -->
            <a href="javascript: history.back();" class="back-link">← 返回首页</a>

            <div class="mixed-news-list">
                <article class="domestic-news-item">
                    <div class="domestic-news-info">
                        <h2>${item.title}</h2>
                        <div class="domestic-news-meta">
                            <span class="source">${item.author}</span>
                            <span class="time">${item.air_time}</span>
                        </div>

                        <div class="detail-content">
                                ${item.text}
                        </div>
                    </div>
                </article>
                <div class="comment">
                    <h3>评论</h3>
                    <c:if test="${empty sessionScope.user}">
                        <p>请
                            <button class="" onclick="location.href='<c:url value="/page/login"/>'">登录</button>
                            后发表评论
                        </p>
                    </c:if>
                    <c:if test="${!empty sessionScope.user}">
                        <input name="comment" id="comment" placeholder="请输入评论内容" type="">
                        <br/>
                        <button id="send">发表评论</button>
                        <p style="color: gray">请文明发言，评论内容将公开显示。未审核通过的内容将不会显示。</p>
                    </c:if>
                    <div id="comm">
                    </div>
                </div>
            </div>
        </section>
        </c:forEach>
    </div>

    <script>
        $(document).ready(function () {
            $.ajax({
                url: '/page/get/comm?id=' + '<%=request.getParameter("id")%>',
                type: 'GET',
                success: function (data) {
                    console.log(data);
                    var html = '';
                    for (var i = 0; i < data.length; i++) {
                        var item = data[i];
                        html += '<div style="padding: 10px 0"> <p style="font-size: small;color: gray">' + data[i].comment_user + '</p><p>' + data[i].comment + '</p></div>'
                    }
                    $("#comm").append(html);
                }
            });
        });

        document.getElementById("send").onclick = function () {
            if ($("#comment").val() === '' || $("#comment").val() === null) {
                alert("评论内容不能为空");
                return;
            }
            <c:forEach items="${news}" var="item">
            $(document).ready(function () {
                $.ajax({
                    url: '/page/add/comm',
                    type: 'POST',
                    contentType: 'application/json',
                    data: JSON.stringify({
                        comment_user: '${sessionScope.user}',
                        comment: $("#comment").val(),
                        news: '${item.id}'
                    }),
                    success: function (data) {
                        console.log(data);
                        if (data === 1) {
                            alert("评论成功！未审核通过的内容将不会显示。");
                            location.reload();
                        }
                    }
                });
            });
            </c:forEach>
        }
    </script>

    <!-- 侧边栏保持不变 -->
    <aside class="sidebar">
        <div class="sidebar-widget hot-topics">
            <h3>热点排行</h3>
            <ol>
                <li>中国成功发射新一代载人飞船</li>
                <li>国庆假期旅游数据创新高</li>
                <li>全球AI峰会达成重要共识</li>
                <li>京津冀协同发展新规划</li>
                <li>联合国通过气候行动决议</li>
                <li>新能源装机容量突破12亿千瓦</li>
                <li>诺贝尔物理学奖揭晓</li>
                <li>达沃斯经济论坛开幕</li>
                <li>亚运会中国女排首战告捷</li>
                <li>数字经济发展意见发布</li>
            </ol>
        </div>

        <div class="sidebar-widget live-broadcast">
            <h3>直播中</h3>
            <div class="live-item">
                <img src="<c:url value="/resources/img/3.jpeg"/>" alt="亚运会女排比赛">
                <p>亚运会中国女排对阵日本</p>
            </div>
            <div class="live-item">
                <img src="<c:url value="/resources/img/4.jpeg"/>" alt="全球AI峰会">
                <p>全球人工智能峰会闭幕式</p>
            </div>
        </div>
    </aside>
</div>

<!-- 底部区域保持不变 -->
<footer class="news-footer">
    <div class="footer-container">
        <div class="footer-links">
            <a href="#">关于我们</a>
            <a href="#">联系方式</a>
            <a href="#">广告服务</a>
            <a href="#">版权声明</a>
            <a href="#">隐私政策</a>
        </div>
        <div class="copyright">
            <p>© 2025 新华每日新闻 版权所有 ICP证：京ICP备12345678号</p>
        </div>
    </div>
</footer>
<script>
    function logout() {
        $(document).ready(function () {
            $.ajax({
                url: '/logout',
                type: 'get',
                success: function (data) {
                    location.reload();
                },
                error: function (data) {
                    alert('出错了');
                }
            });
        });
    }
</script>
</body>
</html>
    